<template>
  <div class="number-selection" v-if="!getIsPhone">
    <play-instruction :instruction="instruction"></play-instruction>
    <div class="number-select-area">
      <div class="select-row">
        <textarea 
          class="textarea" name="" id=""
          placeholder="请输入购买彩票号码"
          @input="saveNumbers"
          >
        </textarea>
      </div>
    </div>
  </div>
  <div v-else class="number-selection">
    <div class="number-select-area">
      <div class="select-row">
        <textarea 
          v-model="numbers"
          class="textarea" name="" id=""
          :placeholder="instruction"
          @keyup="saveNumbers"
          >
        </textarea>
      </div>
    </div>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import { mapMutations, mapGetters } from 'vuex'
export default {
  components: {
    PlayInstruction,
  },
   data() {
    return {
      instruction: '手动输入号码，五个数字组成一注，每注用逗号(",")、分号(":")或空格(" ")分隔。',
      numbers: ''
    }
  },
  methods: {
    saveNumbers(e) {
      let value = Number(e.target.value.replace(/[^0-9,]/g,''))
      this.numbers = value
      let numStr = e.target.value
      let dividers = [' ', ',', ':']
      let divider
      dividers.some((item, index) => {
        if (numStr.indexOf(item) > -1) {
          divider = item
          return true
        } 
        return false
      })
      let numArr = numStr.split(divider)
      let position = ['万', '千', '百', '十', '个']
      let lotteryNumbers = []
      numArr.forEach(item => {
        item.split('').forEach((value, index) => {
          
        }) 
      })
    },
    ...mapMutations({
      setBallState: 'SET_BALL_SELECTION_STATE'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .number-selection
    .number-select-area
      width 100%
      margin-bottom 20px
      .select-row
        width 100% 
        height 190px
        padding 0 20px 
        box-sizing border-box
        @media screen and (max-width 750px) 
          padding 10px 
        .textarea
          width 100%
          height 100% 
          outline-style none
          border-radius 3px
          box-sizing border-box 
          padding 20px
          @media screen and (max-width 750px) 
            background #f4f4f4
            border:1px solid rgba(219, 211, 211, 1);
            box-shadow:-1px -1px 2px 0px rgba(0, 0, 0, 0.2);
            border-radius:6px;
          &.number-box-selected-blue
            color rgba(0,154,224,1)
            background rgba(60,142,255,0.1);
            border 1px solid rgba(0,154,224,1)
</style>